<template>
  <div class="chart" id="Livechart">
  </div>
</template>

<script>
  import { inject, onMounted, reactive  } from "vue";
  import emitter from '../bus'

  export default {
      setup() {
    // 引入echarts
    let $echarts = inject("echarts");
    let $http = inject("axios");
    // 数据接收
    let LiveData = reactive({});
    let date = reactive([]);
    let place = reactive([]);
    let xnumber = reactive([]);
    function setData(vehicle) {
      date.splice(0,date.length) 
      place.splice(0,place.length) 
      xnumber.splice(0,xnumber.length) 
      if (LiveData.data.length > 0) {
          for (let item of LiveData.data) {
            if(item['车辆类型']==vehicle){
              
              place.push(item['卡口名称']);
              date.push(item['月']);
              let data=[]
              data.push(item['月']);
              data.push(item['卡口名称']);
              data.push(item['过车数量']);
              
              xnumber.push(data)
            }
          }
      }
      place = Array.from(new Set(place))
      date = Array.from(new Set(date))
      xnumber =xnumber.map(obj=>{
          return  Object.values(obj)
        })
      xnumber=xnumber.map(function (item) {
          return [item[1], item[0]-3, item[2] || '-'];
      });
      console.log("这里是热力图数据:")
      console.log(place)
      console.log(date)
      console.log(xnumber)
      
    }
    async function getState() {
      LiveData = await $http({ url: "/bayonetday/bayonet-day" });
    }
    onMounted(() => {
    drawLive("大型普通客车")
    emitter.on('car', (car) => {
          drawLive(car)
        })
    function drawLive(vehicle){
      
      // 初始化echarts
      let myChart = $echarts.init(document.getElementById("Livechart"));
      getState().then(() => {
        setData(vehicle);
        myChart.setOption({
          title: 
          {
            text: vehicle+'--在各卡口数量热力图',
            left: 'center',
            top: '10%',
            // triggerEvent: true,
            textStyle:{
                  color: 'bisque'//字体颜色
                },
          },
          tooltip: {
            position: 'top'
          },
          grid: {
            height: '70%',
            top: '20%'
          },
          dataZoom: [
            {
              type: "inside"
            }
          ],
          xAxis: {
            type: 'category',
            data: place,
            splitArea: {
              show: true
            },
            
          },
          yAxis: {
            type: 'category',
            data: date ,
            splitArea: {
              show: true
            },
            
          },
          visualMap: {
            min: 0,
            max: 300000,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '-50%',
            inRange:{
                color: ['rgba(0,255,0,0.3)','rgba(255,255,0,0.3)', 'rgba(255,0,0,0.5)']
            }
          },
          series: [
            {
              // name: 'Punch Card',
              type: 'heatmap',
              data: xnumber,
              label: {
                show: true
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
        window.onresize = myChart.resize;
        myChart.on("click", params => {
          console.log('这是热力图点击数据',params.data)
          emitter.emit("city", params.data[0])
          emitter.emit("mouth",params.data[1]+3)
          emitter.emit("linemouth",params.data[1]+3)
          })
      });
    
    }
    });
    return {
      getState,
      LiveData,
      date,
      place,
      xnumber,
      setData,
    };
  },
  }
</script>

<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>